<!--
 * @Description: 
 * @Date: 2024-07-08 14:55:52
 * @LastEditTime: 2024-07-31 15:27:05
-->
<template>
  <div class="reportDetails w-100% flex gap-20px">
    <div class="flex-1 bg-#fff p-20px">
      <div>
        <p class="font-bold text-18px redBefore">上交情况</p>
        <div class="detailsItem">
          <span>上报人：</span>
          <span>{{ baseData.createName }}</span>
        </div>
        <div class="detailsItem">
          <span>上报时间：</span>
          <span>{{ formatTime(baseData.createTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
        </div>
        <div class="detailsItem">
          <span>事件类型：</span>
          <dict-tag :type="DICT_TYPE.SYSTEM_CUNQING_TYPE" :value="baseData.type" />
        </div>
        <div class="detailsItem">
          <span>标题：</span>
          <span>{{ baseData.title }}</span>
        </div>
        <div class="detailsItem">
          <span>事件描述：</span>
          <span>{{ baseData.content }}</span>
        </div>
        <div class="detailsItem">
          <span>材料：</span>
          <div class="flex gap-20px flex-wrap">
            <div v-for="item in baseData.fileDOList" :key="item.id">
              <video
                v-if="item.type == 'video/mp4'"
                class="w-300px h-200px"
                :src="item.url"
                autoplay
                controls
              ></video>
              <el-image v-else class="w-300px h-200px" :src="item.url" />
            </div>
          </div>
        </div>
      </div>
      <div>
        <p class="font-bold text-18px redBefore">处理情况</p>
        <div class="flex gap-30px">
          <div class="detailsItem">
            <span>状态：</span>
            <dict-tag :type="DICT_TYPE.SYSTEM_CUNSTATE_TYPE" :value="baseData.status" />
          </div>
          <div class="detailsItem">
            <span>办结结果：</span>
            <dict-tag :type="DICT_TYPE.SYSTEM_CUNRESULT_TYPE" :value="baseData.resultStatus" />
          </div>
        </div>
        <div class="detailsItem block">
          <span>办结说明：</span>
          <span>{{ baseData.result }}</span>
        </div>
      </div>
      <div>
        <p class="font-bold text-18px redBefore">评价情况</p>
        <div>
          <div class="detailsItem flex items-center">
            <span>综合评价：</span>
            <el-rate v-model="baseData.rating" disabled text-color="#ff9900" />
          </div>
          <div class="detailsItem">
            <span>说说想法：</span>
            <span>{{ baseData.evaluate }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="w-300px bg-#fff p-20px">
      <div style="height: 300px; max-width: 600px">
        <el-steps direction="vertical" :active="active">
          <el-step>
            <template #title>
              <span>提交</span>
            </template>
            <template #description>
              <div class="flex">
                <span class="mr-20px">{{ baseData.createName }}</span>
                <span>{{ formatTime(baseData.createTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
              </div>
            </template>
          </el-step>
          <el-step>
            <template #title>
              <span v-if="active >= 2">转交给 {{ baseData.userName }}</span>
            </template>
            <template #description>
              <div class="flex" v-if="active >= 2">
                <span class="mr-20px">{{
                  baseData.transTime ? baseData.transTime.split(',')[0] : ''
                }}</span>
                <span>{{ baseData.transTime ? baseData.transTime.split(',')[1] : '' }}</span>
              </div>
            </template>
          </el-step>

          <el-step>
            <template #title>
              <span v-if="active >= 3">已办结</span>
            </template>
            <template #description>
              <div class="flex" v-if="active >= 3">
                <span class="mr-20px">{{ baseData.userName }}</span>
                <span>{{ formatTime(baseData.updateTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import * as ReportApi from '@/api/countryside/report'
import { formatTime } from '@/utils/index'
import { DICT_TYPE } from '@/utils/dict'
import WxVideoPlayer from '@/views/mp/components/wx-video-play'
const route = useRoute()
const baseData = ref<any>({})
const active = ref(2)
onMounted(() => {
  let id = route.params.id
  ReportApi.getReport(id).then((res) => {
    Object.assign(baseData.value, res)
    active.value = Number(baseData.value.status)
  })
})
</script>
<style lang="scss" scoped>
.redBefore {
  position: relative;
  padding-left: 10px;
}
.redBefore::before {
  content: '';
  width: 6px;
  height: 100%;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}
.detailsItem {
  margin-bottom: 20px;
  & > span:nth-child(1) {
    color: #8e8e8e;
  }
}
</style>
